<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test7</title>
		<style>
			body
			{
				background-color: black;
			}
			@keyframes ct
			{
				0%
				{
					width: 300px;
					height: 300px;
				}
				50%
				{
					border: 2px solid red;
					left: 145px;
					top: 145px;
					width: 10px;
					height: 10px;
				}
				100%
				{
					width: 300px;
					height: 300px;
				}
			}
			#d1
			{
				position: absolute;
				top: 100px;
				left: 100px;
				height: 500px;
				width: 500px;
			}
			#d1d1
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				border: 4px solid aqua;
				animation: ct 4s;
				-webkit-animation: ct 4s;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#d1d2
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				border: 4px solid aqua;
				animation: ct 4s;
				-webkit-animation: ct 4s;
				animation-delay: 0.2s;
				-webkit-animation-delay: 0.2s;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#d1d3
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				border: 4px solid aqua;
				animation: ct 4s;
				-webkit-animation: ct 4s;
				animation-delay: 0.4s;
				-webkit-animation-delay: 0.4s;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#d1d4
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				border: 4px solid aqua;
				animation: ct 4s;
				-webkit-animation: ct 4s;
				animation-delay: 0.6s;
				-webkit-animation-delay: 0.6s;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#d1d5
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				border: 4px solid aqua;
				animation: ct 4s;
				-webkit-animation: ct 4s;
				animation-delay: 0.8s;
				-webkit-animation-delay: 0.8s;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#d1d6
			{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				border: 4px solid aqua;
				animation: ct 4s;
				-webkit-animation: ct 4s;
				animation-delay: 1s;
				-webkit-animation-delay: 1s;
				animation-iteration-count: infinite;
				-webkit-animation-iteration-count: infinite;
			}
			#d2
			{
				position: absolute;
				top: 500px;
				left: 100px;
				height: 500px;
				width: 500px;
			}
			#d2d1
			{
				position: absolute;
				z-index: 2;
				top: 0px;
				left: 0px;
				height: 402px;
				width: 402px;
				border-radius: 100%;
				background-color: black;
			}
			#d2d2
			{
				position: absolute;
				z-index: 1;
				top: 1px;
				left: 1px;
				height: 400px;
				width: 400px;
				border-radius: 100%;
				background-color: transparent;
				transition: 1s;
			}
			#d2:hover #d2d2
			{
				left: -7px;
				top: -7px;
				width: 416px;
				height: 416px;
				background-color: aqua;
				box-shadow: 0px 0px 5px aqua;
			}
			#d2d3
			{
				position: absolute;
				z-index: 3;
				top: 170px;
				width: 400px;
				text-align: center;
				font-size: 35px;
				color: transparent;
				transition: 1s;
			}
			#d2:hover #d2d3
			{
				color: aqua;
				text-shadow: 0px 0px 5px aqua;
			}
			#d2d4
			{
				position: absolute;
				z-index: 4;
				top: 215px;
				left: 200px;
				height: 2px;
				width: 0px;
				background-color: transparent;
				transition: 1s;
			}
			#d2:hover #d2d4
			{
				left: 50px;
				width: 300px;
				background-color: aqua;
				box-shadow: 0px 0px 5px aqua;
			}
		</style>
	</head>
	<body>
		<div id='d1'>
			<div id='d1d1'></div>
			<div id='d1d2'></div>
			<div id='d1d3'></div>
			<div id='d1d4'></div>
			<div id='d1d5'></div>
			<div id='d1d6'></div>
		</div>
		<div id='d2'>
			<div id="d2d1"></div>
			<div id="d2d2"></div>
			<div id="d2d3">Sword Art Online</div>
			<div id="d2d4"></div>
		</div>
	</body>
</html>